// 列表页(分页)js
// 1. 先显示加载层
let index = layer.load(0, { shade: [0.3, '#ccc'] });
// 请求获取数据
$.ajax({
  url: '../server/list.php',
  dataType: 'json',
  success(res) {
    // 结构数据
    let { data } = res;
    // layui分页组件
    // 引入了layui之后使用use方法导入laypage
    layui.use(['laypage'], function () {
      let laypage = layui.laypage;
      //调用分页
      laypage.render({
        elem: 'page', // 在页面中渲染分页组件的标签id
        count: data.length, // 总数据的条数
        // count:数据总条数显示 prev:上一页  next:下一页
        layout: ['prev', 'page', 'next', 'limit', 'refresh', 'skip'],
        limits: [8, 12,16],
        limit: 8,
        first: '首页',
        last: '尾页',
        groups: 6,
        jump: function (obj) { // 页码跳转函数        
          let str = function () { // 自调用函数执行,返回一个拼接好的html字符串
            var thisData = data.concat().splice((obj.curr - 1) * obj.limit, obj.limit);
            var arr = thisData.map(v => `
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
           <div class="thumbnail">
              <img src="${v.imgpath.split('==========')[0]}" alt="...">
              <div class="caption">
                  <h3 style="font-size: 18px">${v.name}</h3>
                  <h3><span style="font-size: 12px;color: #fff;background-color: #f00581;border-radius: 8px;display:inline-block;padding:3px 5px">特卖价</span><b style="font-size:16px">￥${v.price}</b><del style="color:#ccc;font-size:12px;padding:0 10px">￥299</del><i style="color:#ccc;font-size:14px;">4.5折</i></h3>
                  <p class='introduce' style="margin-top: 10px; font-size: 14px;color: #333;margin-bottom: 30px;position: relative;">${v.introduce}</p>
                  <p style="position: absolute;bottom: 56px;left: 45px;">
                      <a href="#" class="btn btn-default detail" role="button" index=${v.id} style="width:76px;height:32px;background-color: pink;color: red;">查看详情</a>
                  </p>
              </div>
            </div>
           </div>
          `);
            return arr.join('');
          }();
          //渲染
          $('#list').html(str);
          // 关闭弹出层
          layer.close(index);
        }
      });
    });
  }
})
// 使用事件委托进行查看详情的跳转
$('#list').on('click', '.detail', function () {
  // 获取商品的id
  let id = $(this).attr('index');
  // 将商品id存储到sessionStorage中  在跳转的页面中可以访问到商品的id
  sessionStorage.setItem('goodsId', id);
  // 跳转
  location.href = 'detail.html';
  return false;// 阻止默认跳转
})


$('.num1').hover(function () {
  $('.please').css({ 'color': '#f10180', 'text-decoration': 'none' });
  $(this).css({ 'backgroundColor': '#fff', 'cursor': 'pointer' }).find('.menu1').css({
    'display': 'block',
    'backgroundColor': '#fff',
    'z-index':'100'
  })
  $('.menu1>p').hover(function () {
    $(this).css('color', '#f10180')
  }, function () {
    $(this).css('color', '#666')
  })
}, function () {
  $('.please').css({ 'color': '#666', 'text-decoration': 'none' });
  $(this).css('backgroundColor', '#f5f5f5').find('.menu1').css('display', 'none')
})
$('.breadcrumb>li').hover(function () {
  $(this).find('i').addClass('glyphicon glyphicon-triangle-top').css('color', '#f10180').parent().css('backgroundColor', '#fff').find('.menu').css({
    'border': '1px solid #999',
    'border-top': 'none',
  })
}, function () {
  $(this).find('i').removeClass('glyphicon glyphicon-triangle-top')
  $(this).find('i').addClass('glyphicon glyphicon-triangle-bottom').css('color', '#666').parent().css('backgroundColor', '#f5f5f5')
})
// 二级菜单下拉展开,上拉收起
$('.range').parent().hover(function () {
  $(this).find('.menu-nav').stop().slideDown().css('z-index', '100')
}, function () {
  $(this).find('.menu-nav').stop().slideUp()
})
// 三级菜单显示隐藏
$('.menu-nav>li').hover(function(){
  $(this).css('backgroundColor','#fff').find('a').first().css('color','#f00581').parent().find('.menu-menu').css({
      'display':'block',
      'z-index':'100'
  })
  },function(){
      $(this).css('backgroundColor','#f00581').find('a').first().css('color','#fff').parent().find('.menu-menu').css({
          'display':'none'
      })
  })

